<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            .basic{
                width: 100px;
                height: 100px;
                background-color: aqua;
                
            }
            .fz{
                font-size: 30px;
            }
            .green{
                background-color: brown;
            }
    </style>
</head>
<body>
        
        <div id="app">
            <!-- <div class="basic":class="{fz:true,green:false}">Vue</div> -->
            <!-- <div class="basic":class="{fz:isfz,green:isgreen}">Vue</div> -->
            <!-- <div class="basic":class="obcj">Vue</div> -->
            <div class="basic" :class="{fz:isfz,green:isgreen}" :style="{borderRadius:asd}">Vue</div>
        </div>
        
        <script src="vue.js"></script>
        <script>
            var app=new Vue({
                el:"#app",
                data:{
                  isfz:false,
                  isgreen:true,
                   
                  asd:'20px',
                },
                
                
                methods:{}
            })
        </script>
</body>
</html>